<!-- 我的关注 -->
<template>
    <view class="sustem-setting">
        <scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
            @scrolltolower="lower">
            <view class="blacklist-item-head">
                <view class="blacklist-item" :class="state.curId == item.id ? 'blacklist-item-cur' : ''"
                    v-for="item in state.headList" :key="item.id" @click="checkItem(item.id)">
                    <text>{{ item.num }}</text>
                    <view class="blacklist-item-text">
                        {{ item.name }}
                    </view>
                </view>
            </view>
            <view class="blacklist-main" v-for="item in state.listData" :key="item.ID" @click="viewDynamic(item)">
                <view class="blacklist-item-left">
                    <HeadImg :headAvatar="item.UserInfo.Avatar" :RealState="item.UserInfo.RealState" :imgWidth="100"/>
                    <view class="name-base-info">
                        <view class="name">{{ item.UserInfo.ShowName }}</view>
                        <view class="base-info">{{ 'ID: ' + item.UserInfo.IMId }}</view>
                    </view>
                </view>
                <view class="blacklist-item-right" @click="unFollowUserFn(item)" v-if="state.curId == 2">
                    <view>已关注</view>
                </view>
            </view>
            <Empty v-if="state.listData.length == 0" title="暂无列表" />
        </scroll-view>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import { onLoad } from '@dcloudio/uni-app'
import { showConfirmDialog } from 'vant';

import {
    unFollowUser, // 取消关注
    FollowUsers,// 获取关注我的人
    FollowYouAndMe, // 获取与我互相关注的人
    UserFollows, // 获取我关注的人
} from "@/api/person/index.js"

let { proxy } = getCurrentInstance()

const state = reactive({
    checked: false,
    headList: [
        {
            id: 1,
            num: 0,
            name: '互为好友'
        },
        {
            id: 2,
            num: 0,
            name: '我的关注'
        },
        {
            id: 3,
            num: 0,
            name: '我的粉丝'
        }
    ],
    curId: 1,
    PageIndex: 1,
    PageSize: 20,
    listData: []
})

const FollowUsersFn = async () => {
    let params = {
        UserId: getAuthorization('userId'),
        PageIndex: state.PageIndex,
        PageSize: state.PageSize
    }
    uni.showLoading()
    let data = await proxy.$get(FollowUsers, params)
    uni.hideLoading()
    if (data.code == 200) {
        state.listData = state.listData.concat(data.data)
    }
}

const FollowYouAndMeFn = async () => {
    let params = {
        UserId: getAuthorization('userId'),
        PageIndex: state.PageIndex,
        PageSize: state.PageSize
    }
    uni.showLoading()
    let data = await proxy.$get(FollowYouAndMe, params)
    uni.hideLoading()
    if (data.code == 200) {
        state.listData = state.listData.concat(data.data)
    }
}

const UserFollowsFn = async () => {
    let params = {
        PageIndex: state.PageIndex,
        PageSize: state.PageSize
    }
    uni.showLoading()
    let data = await proxy.$get(UserFollows, params)
    uni.hideLoading()
    if (data.code == 200) {
        state.listData = state.listData.concat(data.data)
    }
}

// 取消关注
const unFollowUserFn = (item) => {
        showConfirmDialog({
            title: '提示',
            message:
                '确认取消关注',
        })
        .then(async () => {
            try {
                uni.showLoading()
                let data = await proxy.$del(unFollowUser + item.UserInfo.ID)
                uni.hideLoading()
                if (data.code == 200) {
                    state.listData = state.listData.filter(o => o.ID != item.ID)
                    FollowCountFn()
                    uni.showToast({
                        title: "取消关注成功",
                        icon: "none"
                    })
                }
            } catch (error) {
                uni.hideLoading()
            }
        })
        .catch(() => {
            // on cancel
        });

}

// 获取数据
const getData = () => {
    if (state.curId == 3) { FollowUsersFn() }
    if (state.curId == 1) { FollowYouAndMeFn() }
    if (state.curId == 2) { UserFollowsFn() }
}

const checkItem = (id) => {
    state.curId = id
    state.PageIndex = 1
    state.PageSize = 20
    state.listData = []
    getData()
}

const upper = (e) => {
}
const lower = (e) => {
    state.PageIndex++
    getData()
}

// 简介
const strInfo = (item) => {
    let sexStr = item.Sex == 0 ? '女' : '男'
    let ageStr = item.Age ? '/' + item.Age : ''
    let ConstellationStr = item.Constellation ? '/' + item.Constellation : ''
    return sexStr + ageStr + ConstellationStr
}

import {
    FollowCount
} from "@/api/person/index.js"

const FollowCountFn = async (item) => {
    try {
        uni.showLoading()
        let data = await proxy.$get(FollowCount)
        uni.hideLoading()
        if (data.code == 200) {
            state.headList.forEach(o => {
                if (o.id == 1) o.num = data.data.FollowMeAndYouCount
                if (o.id == 2) o.num = data.data.FollowToCount
                if (o.id == 3) o.num = data.data.FollowMeCount
            })
        }
    } catch (error) {
        uni.hideLoading()
    }
}

const viewDynamic = (item) => {
    uni.navigateTo({
        url: '/pages/home/person/dynamic/index?tabTypes=2&userId=' + item.UserInfo.ID
    })
}

onLoad((options) => {
})

onMounted(() => {
    getData()
    FollowCountFn()
})



</script>
    
<style lang="scss" scoped>
.blacklist-item-head {
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;

    .blacklist-item {
        width: 33.33%;
        text-align: center;
        color: #999;
        padding: 20rpx 0;
        border-bottom: 1px solid #f2f2f2;

        text {
            font-size: 36rpx;
            font-weight: 600;
        }

        .blacklist-item-text {
            font-size: 24rpx;
        }
    }

    .blacklist-item-cur {
        color: #333;
    }
}

.blacklist-main,
.blacklist-item-left {
    display: flex;
    align-items: center;
}

.blacklist-main {
    padding: 20rpx;
    justify-content: space-between;

    .name-base-info {
        margin-left: 20rpx;
    }

    .name {
        font-size: 32rpx;
        color: #262626;
    }

    .base-info {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;

    }

    .blacklist-item-right {
        text-align: center;
        font-size: 20rpx;
        color: #999999;

        view {
            height: 42rpx;
            line-height: 42rpx;
            border-radius: 26rpx;
            border: 1px solid #e2e2e2;
            padding: 0 20rpx;
        }
    }
}

.scroll-Y {
    position: fixed;
    height: 100%;
}
</style>
    